<template>
  <div class="pre_lump" v-if="previsible">
    <div class="choice_box">
      <div class="clearfix top_tips">
        <p class="fl tips">预览表单</p>
        <p @click="closeVisible()" class="close fr">
          <i class="el-icon-close"></i>
        </p>
      </div>
      <div class="form-data">
        <el-form ref="form" label-width="120px">
          <el-form-item v-for="(item,key) in listRight" :key="key" :label="item.name">
            <el-input
              v-if="item.value == 'inputText'"
              type="text"
              name="title"
              :placeholder="item.placeholder"
            ></el-input>
            <el-input
              v-else-if="item.value == 'textarea'"
              type="textarea"
              resize="none"
              :rows="4"
              :placeholder="item.placeholder"
            ></el-input>
            <el-select v-else-if="item.value == 'select'" :placeholder="item.placeholder">
              <el-option label="选项1" value="0"></el-option>
              <el-option label="选项2" value="1"></el-option>
            </el-select>
            <el-checkbox-group v-else-if="item.value == 'checkbox'" v-model="checkList">
              <el-checkbox label="复选框 A"></el-checkbox>
              <el-checkbox label="复选框 B"></el-checkbox>
            </el-checkbox-group>
            <el-radio-group v-else-if="item.value == 'radio'" v-model="value">
              <el-radio :label="3">备选项</el-radio>
              <el-radio :label="6">备选项</el-radio>
              <el-radio :label="9">备选项</el-radio>
            </el-radio-group>
            <!-- 开关 -->
            <el-switch
              v-else-if="item.value == 'switch'"
              active-color="#13ce66"
              inactive-color="#dcdfe6"
            ></el-switch>
            <!-- 日期 -->
            <el-date-picker
              v-else-if="item.value == 'formDataTime'"
              type="date"
              :placeholder="item.placeholder"
            ></el-date-picker>
            <!-- 人员选择 -->
            <el-input
              v-else-if="item.value == 'personnel'"
              placeholder="请选择人员"
              class="input-with-select"
            >
              <el-button slot="append">{{ item.placeholder }}</el-button>
            </el-input>
            <!-- 上传图片 -->
            <div v-else-if="item.value == 'upImg'">
              <el-upload class="upload-demo" action="#" list-type="picture">
                <el-button size="small" icon="el-icon-plus" type="primary">上传图片</el-button>
                <span slot="tip" class="el-upload__tip">只能上传jpg/png文件，{{ item.placeholder }}</span>
              </el-upload>
              <div class="imgZw">
                <span id="moren">图片预览</span>
              </div>
            </div>
            <!-- 文件上传 -->
            <el-upload
              v-else-if="item.value == 'upFolder'"
              class="upload-demo"
              action="#"
              list-type="picture"
            >
              <el-button size="small" icon="el-icon-plus" type="primary">上传附件</el-button>
              <span slot="tip" class="el-upload__tip">
                {{
                item.placeholder
                }}
              </span>
            </el-upload>
            <!-- 富文本 -->
              <TinymceEditor
                      v-else-if="item.value == 'richText'"
                      ref="editor"
                     :disabled="disabled"
                     :base-url="baseUrl"
                     :language="language"
                     :skin="skin"
                     v-model="item.placeholder"
                    />
            <!-- <Tinymce
              v-else-if="item.value == 'richText'"
              id="Tinymce02"
              :width="500"
              :toolbar="toolbar"
              :plugins="plugins"
              menubar="file"
              v-model="item.placeholder"
            ></Tinymce> -->
            <div v-else>暂未配置</div>
          </el-form-item>
        </el-form>
      </div>
      <div class="bot_bottom_bot">
        <el-button size="mini" type="primary" @click="closeVisible()">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
// import Tinymce from "@/components/Tinymce/index.vue";
import TinymceEditor from "../../tinymce-editor.vue"; //改成自己的文件夹
export default {
  components: {
    TinymceEditor,
  },
  props: {
    previsible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checkList: ["复选框 A"],
      value: 3,
      baseUrl: "",
      language: "zh_CN",
      skin: "oxide",
      toolbar: [
        "searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo ",
      ],
      plugins: [
        "advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media",
      ],
    };
  },
  computed: {
    listRight() {
      return this.$store.state.formListCur;
    },
  },
  methods: {
    closeVisible() {
      this.$emit("dialog", []);
    },
  },
};
</script>
<style scoped>
/* 弹窗的外层样式 */
.fr{
  float: right;
}
.fl {
  float: left;
}
.pre_lump {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1111;
}

.pre_lump .choice_box {
  position: absolute;
  width: 60%;
  height: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 2px;
  min-width: 850px;
  min-height: 300px;
}

.top_tips {
  margin: 0 20px;
  height: 54px;
  line-height: 54px;
  border-bottom: 1px solid rgb(233, 233, 233);
}

.top_tips .tips {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}

.top_tips i {
  font-size: 18px;
  color: #333333;
}
.bot_bottom_bot {
  width: 100%;
  height: 55px;
  border-top: 1px solid rgb(233, 233, 233);
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-data {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  height: calc(90% - 110px);
  margin: 15px auto;
  overflow-y: auto;
}
.imgZw {
  overflow: hidden;
  width: 300px;
  height: 150px;
  background: #f9f9f9;
  text-align: center;
  line-height: 150px;
  color: #666;
  margin-top: 10px;
}
.close {
  width: 34px;
  height: 34px;
  margin: 10px 0;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.close .el-icon-close {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-icon-close:hover {
  color: red;
  background-color: #f0f0f0;
  border-radius: 50%;
}
.el-upload__tip {
  margin-left: 10px;
}
</style>